<template>
  <div class="login-container">
    <!-- 测试layout -->
      <!-- <router-link to="/e0" class="footer-link">
          e0
        </router-link>
        <router-link to="/e1" class="footer-link">
          e1
        </router-link>
        <router-link to="/e2" class="footer-link">
          e2
        </router-link>
        <router-link to="/c" class="footer-link">
          c
        </router-link> -->
<!-- 测试layout -->
    <div class="login-card">
      <h2 class="login-title">很高兴为您服务！</h2>
      
      
      <el-form
        :model="form"
        @submit.prevent="onSubmit" 
        class="login-form"
        label-position="top"
      >
        <el-form-item label="账号" prop="phone">
          <el-input 
            v-model="form.phone" 
            placeholder="请输入手机号"
            prefix-icon="User"
            clearable
          />
        </el-form-item>
 
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password" 
            type="password"
            placeholder="请输入密码"
            prefix-icon="Lock"
            show-password 
          />
        </el-form-item>
 
        <el-button 
          native-type="submit"
          type="primary"
          class="login-btn"
          :loading="loading"
        >
          登录 
        </el-button>
      </el-form>
 
      <div class="login-footer">
        <router-link to="/cregister" class="footer-link">
          注册账号
        </router-link>
        <span class="divider">|</span>
        <router-link to="/c" class="footer-link">
          游客访问 
        </router-link>
        <span class="divider">|</span>
        <router-link to="/elogin" class="footer-link">
          员工通道
        </router-link>
      </div>
    </div>
  </div>
</template>
 
<script>
import { customer_loginAPI } from "@/api/api.js"; 
import { ElMessage } from "element-plus";
import { User, Lock } from '@element-plus/icons-vue';
import authStore from "@/model/authstore";
 
export default {
  data() {
    return {
      form: {
        phone: "",  // 改为使用phone作为登录账号 
        password: ""
      },
      loading: false
    };
  },
  components: { User, Lock },
  methods: {
    async onSubmit() {
      if (this.loading)  return;
      
      // 验证表单 
      if (!this.form.phone.trim())  {
        ElMessage.warning(" 请输入手机号");
        return;
      }
      if (!this.form.password)  {
        ElMessage.warning(" 请输入密码");
        return;
      }
 
      this.loading  = true;
      try {
        const res = await customer_loginAPI({
          phone: this.form.phone,   // 改为传递phone参数 
          password: this.form.password 
        });
        
        if (res.code  === 200) {
          // 使用authStore统一存储用户信息 
          authStore.set('auth',  {
            token: res.token, 
            user: {
              cid: res.data?.cid,        // 客户ID 
              phone: this.form.phone,    // 手机号 
              name: res.data?.name  || "客户",
              company: res.data?.company  || "",
              address: res.data?.address  || "",
              register_date: res.data?.register_date, 
              type: 'customer'          // 标识用户类型 
            }
          });

          ElMessage.success(res.message  || "登录成功");
          this.$router.push("/c"); 
        } else {
          ElMessage.error(res.message  || "登录失败");
        }
      } catch (error) {
        console.error(" 登录错误:", error);
        if (error.code  === "ECONNABORTED") {
          ElMessage.error(" 请求超时，请检查网络");
        } else if (!error.response)  {
          ElMessage.error(" 无法连接服务器");
        } else {
          ElMessage.error(error.response.data?.message  || "请求错误");
        }
      } finally {
        this.loading  = false;
      }
    }
  }
};
</script>
 
<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-width: 100vh;
  background: linear-gradient(135deg, #efd7b3 0%, #f4f3f1 100%);
}
 
.login-card {
  width: 380px;
  padding: 40px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
 
.login-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.32);
}
 
.login-title {
  text-align: center;
  margin-bottom: 30px;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 500;

}
 
.login-form {
  margin-top: 20px;
  
}
 
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #3f4041;
  margin-bottom: 8px;
}
 
.login-btn {
  width: 100%;
  height: 44px;
  margin-top: 10px;
  font-size: 16px;
  letter-spacing: 2px;
  background-color: rgba(230, 115, 0, 0.775);
  border: 2px;
  box-shadow: 5px 5px 1px 0px rgba(0, 0, 0, 0.08);
}

.login-btn:hover{
  background-color: rgba(255, 162, 0, 0.766);
}
 
.login-footer {
  margin-top: 25px;
  text-align: center;
  font-size: 14px;
  
}
 
.footer-link {
  color: #606266;
  text-decoration: none;
  transition: color 0.3s;
}
 
.footer-link:hover {
  color: rgb(232, 143, 0)
}


 
/* 修改聚焦时的阴影 */
:deep(.el-input__wrapper.is-focus)  {
  box-shadow: 0 0 0 1px rgba(100, 99, 99, 0.785) inset !important;
}
 
/* 修改hover状态 */
:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px rgba(139, 137, 136, 0.614) inset !important;
} 
 


 
.divider {
  margin: 0 12px;
  color: #dcdfe6;
}
</style>